import React, { Component } from 'react'

// 函数式组件默认的时候，函数的参数就是我们要的 props
const Header = (props)=>{
  console.log(props.num);
  return (
    <>
      <div> 欢迎来到 {props.name} 班级 </div>
    </>
  )
}
//  定义函数式组件中的默认值
// 如果父组件有传递值，那么我们就使用父组件传递的值
// 如果父组件不传的话 就使用这里配置的默认值
Header.defaultProps = {
  name: 'H5-2218'
}


// 类组件需要通过 this.props 来进行传递参数的接收获取
// 在函数式组件中没有 this
// 类组件中需要通过 this 进行访问
class Content extends Component {
  /*
    类继承的时候，子类可以继承父类的所有属性和方法，且可以扩展新的属性和方法
    父类中定义的静态私有属性和方法是无法被继承的
  */

  // static: 定义静态私有属性和方法用的

  // static defaultProps = {
  //   contentName: '张二'
  // }

  render(){

    console.log(this.props.contentName);

    return (<>
      <div> {this.props.contentName} 学习 react 实际上就是在学 JavaScript </div>
    </>)
  }
}

// 类组件也可以通过 defaultProps 来进行定义默认值
Content.defaultProps = {
  contentName: '张三'
}

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 属性传值的时候，只要不是纯字符串我们都需要加 {} */}
        <Header num={10}></Header>
        <Content  />
      </div>
    )
  }
}
